CSS @property: Kohandatud omaduste tüüpide defineerimine ja valideerimine

Pidevalt arenevas veebiarenduse maailmas nõuab esirinnas püsimine uute tehnoloogiate ja tehnikate omaksvõtmist, mis suurendavad tõhusust, hooldatavust ja üldist kasutajakogemust. CSS-i kohandatud omadused, tuntud ka kui CSS-i muutujad, on muutnud pöördeliselt viisi, kuidas me stiile haldame ja kontrollime. @property at-reegli kasutuselevõtuga saab CSS veelgi võimsama tööriista: võime defineerida ja valideerida neid kohandatud omadusi, mis viib robustsema ja prognoositavama stiilimiseni.

Mis on CSS @property?

@property at-reegel võimaldab arendajatel defineerida kohandatud omaduste tüübi, süntaksi ja muid omadusi. Mõelge sellest kui viisist pakkuda oma CSS-i muutujatele struktuuri ja valideerimist. Enne @property-d olid CSS-i muutujad sisuliselt lihtsalt tekstistringid, mis võisid sisaldada mida iganes. See struktuuri puudumine võis põhjustada vigu, muutes silumise keerulisemaks ja takistades üldist disaini järjepidevust. @property lahendab need probleemid, pakkudes mehhanismi, millega kontrollida kohandatud omadustele määratavate väärtuste tüüpe.

Miks kasutada CSS @property't? Kasu ja eelised

@property kasutamise eelised on arvukad ja aitavad otseselt kaasa parematele veebiarenduse tavadele:

• Parem koodi hooldatavus: Kohandatud omaduste tüüpide ja käitumise selgesõnalise defineerimisega muudate oma koodi isedokumenteerivamaks ja kergemini mõistetavaks. Teised arendajad (või teie tulevane mina) saavad kiiresti aru, kuidas kohandatud omadust on mõeldud kasutama.
• Parem disaini järjepidevus: Valideerimine tagab, et kohandatud omadustele määratakse ainult kehtivaid väärtusi. See aitab säilitada ühtlast visuaalset ilmet kogu teie veebisaidil või rakenduses.
• Töökindlus ja vigade ennetamine: Kehtetud väärtused lükatakse tagasi, vältides ootamatuid stiiliprobleeme ja vähendades silumisele kuluvat aega.
• Dünaamiline stiilimine: @property võimaldab paremat integreerimist JavaScriptiga, lubades teil programmeerimislikult kontrollida ja uuendada oma CSS-i muutujaid kindlalt, teades, et väärtused on kehtivad.
• Parem automaatne täiendamine ja arendajakogemus: Koodiredaktorid saavad pakkuda intelligentsemat automaatset täiendamist ja koodivihjeid, aidates arendajatel kirjutada CSS-i kiiremini ja täpsemalt.
• Optimeeritud jõudlus: Kuigi jõudlusmõju on üldiselt väike, võib valideerimine mõnikord viia brauseri poolt tehtavate väiksemate optimeerimisteni.

@property reegli põhikomponendid

@property at-reegel koosneb mitmest võtmekomponendist, mis defineerivad, kuidas kohandatud omadus käitub.

--property-name

See on kohandatud omaduse nimi, mida te defineerite. See peab algama kahe sidekriipsuga (--), nagu on CSS-i kohandatud omaduste puhul standard.

            @property --my-color { ... }
            

              
                Copy
              
            
          

syntax

syntax deskriptor defineerib kohandatud omaduse väärtuste lubatud tüübi või mustri. See kasutab CSS-i süntaksi alamhulka ja võib võtta erinevaid väärtusi, sealhulgas:

• <color>: Esindab värviväärtust (nt red, #FF0000, rgba(255, 0, 0, 1)).
• <length>: Esindab pikkusväärtust (nt 10px, 5em, 20%).
• <number>: Esindab arvväärtust (nt 10, 3.14).
• <percentage>: Esindab protsentuaalset väärtust (nt 50%).
• <url>: Esindab URL-i (nt url('image.jpg')).
• <integer>: Esindab täisarvulist väärtust (nt 10, -5).
• <angle>: Esindab nurga väärtust (nt 45deg, 0.5turn).
• <time>: Esindab ajaväärtust (nt 2s, 200ms).
• <string>: Esindab stringiväärtust.
• <image>: Esindab pildiväärtust (sama mis url).
• *: Aktsepteerib mis tahes kehtivat CSS-väärtust. See on väga lubav lähenemine ja seda tuleks kasutada ettevaatlikult.
• Kombineeritud tüübid: Saate kombineerida mitut tüüpi, kasutades tühikutega eraldatud loendeid (nt <length> <length> <length> kolme pikkusväärtuse defineerimiseks) või kasutada '|' sümbolit, et lubada ükskõik millist loetletud tüüpidest (nt <length> | <percentage> pikkuse või protsendi toetamiseks).
• Kohandatud süntaksid: Kohandatud süntakseid keerukamate stsenaariumide jaoks toetavad sageli kohandatud implementatsioonid, kuigi neid kirjeldatakse tavaliselt regex-stiilis süntaksiga, nagu näiteks [a-z]+.

            
@property --base-color {
  syntax: <color>;
  inherits: false;
  initial-value: #333;
}

            

              
                Copy
              
            
          

inherits

inherits deskriptor määrab, kas kohandatud omadus pärib oma väärtuse oma vanem-elemendilt. Vaikimisi kohandatud omadused ei päri. Seda käitumist saab kontrollida loogikaväärtusega: true või false.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 16px;
}

            

              
                Copy
              
            
          

initial-value

initial-value deskriptor määrab kohandatud omaduse vaikeväärtuse, kui see pole CSS-is selgesõnaliselt defineeritud. See pakub varuväärtust, kui omadust pole määratud, sarnaselt standardsete CSS-omaduste käitumisega.

            
@property --border-width {
  syntax: <length>;
  inherits: false;
  initial-value: 1px;
}

            

              
                Copy
              
            
          

Praktilised näited

Süveneme mõnesse praktilisse näitesse, et illustreerida, kuidas @property't tõhusalt kasutada.

Näide 1: Värviomaduse defineerimine

Selles näites defineerime kohandatud omaduse --primary-color, et esindada meie disainisüsteemis põhivärvi. Määrame, et see aktsepteerib ainult värviväärtusi.

            
@property --primary-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

body {
  --primary-color: #007bff; /* Kehtiv */
  color: var(--primary-color);
}

h1 {
  --primary-color: rgb(255, 0, 0); /* Kehtiv */
  color: var(--primary-color);
}

            

              
                Copy
              
            
          

Näide 2: Pikkusomaduse defineerimine

Siin defineerime kohandatud omaduse --spacing elementide vahekauguste haldamiseks, aktsepteerides pikkusväärtusi. See näide demonstreerib selgelt `initial-value` määramise väärtust kogu saidi vaikimisi seadena. See on eriti kasulik disainisüsteemi kasutamisel, kus vahekauguste vaikeseaded on defineeritud.

            
@property --spacing {
  syntax: <length>;
  inherits: false;
  initial-value: 1rem;
}

p {
  margin-bottom: var(--spacing);
}

            

              
                Copy
              
            
          

Näide 3: Täisarvuomaduse defineerimine

See näide defineerib kohandatud omaduse ruudustiku paigutuse veergude arvu jaoks, valideerides, et väärtus on täisarv.

            
@property --grid-columns {
  syntax: <integer>;
  inherits: false;
  initial-value: 3;
}

.grid-container {
  display: grid;
  grid-template-columns: repeat(var(--grid-columns), 1fr);
}

            

              
                Copy
              
            
          

Näide 4: Omaduse pärimine

Siin defineerime kohandatud omaduse, mis *päritakse*. Body'le määratud `font-size` omadus väärtusega `1rem` mõjutab kõiki selle laps-elemente, kui seda just üle ei kirjutata.

            
@property --font-size {
  syntax: <length>;
  inherits: true;
  initial-value: 1rem;
}

body {
  --font-size: 1rem;
  font-size: var(--font-size);
}

h2 {
  font-size: 1.25rem; /* Kirjutab päritud väärtuse üle */
}

            

              
                Copy
              
            
          

Näide 5: Tüüpide kombineerimine

Kasutades '|' operaatorit, saame tüüpe kombineerida. Siin aktsepteerime varju nihke jaoks kas `length` või `percentage` väärtust.

            
@property --shadow-offset {
  syntax: <length> | <percentage>;
  inherits: false;
  initial-value: 0;
}

.box {
  box-shadow: 0 var(--shadow-offset) var(--shadow-offset) gray;
}

            

              
                Copy
              
            
          

Parimad tavad @property kasutamiseks

Et maksimeerida @property'st saadavat kasu, järgige neid parimaid tavasid:

• Defineerige omadused keskses asukohas: Grupeerige oma @property definitsioonid eraldi CSS-faili või sektsiooni, sageli oma peamise stiililehe ülaossa või disainisüsteemi faili. See soodustab organiseeritust ja muudab kohandatud omaduste haldamise lihtsaks.
• Kasutage kirjeldavaid omaduste nimesid: Valige nimed, mis viitavad selgelt iga kohandatud omaduse eesmärgile (nt --primary-button-color, --header-font-size). See parandab loetavust ja mõistetavust.
• Pakkuge põhjalikku dokumentatsiooni: Dokumenteerige oma kohandatud omadused, sealhulgas nende süntaks, kasutus ja mis tahes piirangud. Selle dokumentatsiooni võib lisada kommentaaride vormis oma CSS-i kõrvale või eraldi stiilijuhendisse.
• Valige õige süntaks: Valige hoolikalt iga omaduse jaoks sobiv syntax. Õige süntaksi kasutamine ennetab vigu ja tagab, et määratud väärtused on kehtivad.
• Kaaluge pärimist hoolikalt: Otsustage, kas omadus peaks pärima oma väärtuse oma vanem-elemendilt. See sõltub omaduse olemusest ja sellest, kuidas seda tuleks teie disainis rakendada.
• Kasutage initial-value't strateegiliselt: Määrake initial-value kõigile kohandatud omadustele, mis nõuavad vaikeväärtust. See pakub varuvarianti ja tagab, et stiil rakendub ka siis, kui omadust pole selgesõnaliselt määratud.
• Kasutage disainisüsteeme: Integreerige @property oma disainisüsteemi, et säilitada järjepidevus ja parandada oma meeskonna arendustöövoogu. Kasutades seda koos teiste komponentidega, loote robustsemaid ja modulaarsemaid disaine, mis on sageli eesmärk globaalseks kasutamiseks mõeldud komponentide loomisel.
• Testige põhjalikult: Testige oma kohandatud omadusi ja nende käitumist erinevates brauserites ja seadmetes, et tagada ühilduvus ja ühtlane kasutajakogemus. Brauseriülene testimine on kriitiline samm, kuna `property` tugi pole veel universaalselt rakendatud.

Brauseriühilduvus

26. oktoobri 2023 seisuga on @property at-reegli tugi brauserites erinev. Chrome, Edge ja Safari toetavad seda hästi, samas kui Firefoxi tugi on piiratud. Brauseriühilduvuse kohta ajakohase teabe saamiseks konsulteerige alati ressurssidega nagu Can I Use ([https://caniuse.com/mdn-css_at-rules_property](https://caniuse.com/mdn-css_at-rules_property)).

Olulised kaalutlused brauseriühilduvuse osas:

• Funktsionaalsuse tuvastamine: Kasutage funktsionaalsuse tuvastamise tehnikaid, et sujuvalt hallata brausereid, mis ei toeta @property't. Saate kasutada CSS-i omaduse kontrolli või JavaScripti funktsionaalsuse tuvastamist, et rakendada alternatiivseid stiile või polüfille.
• Progressiivne täiustamine: Kujundage oma veebisait baasstiiliga, mis töötab ilma @property'ta. Seejärel täiustage disaini järk-järgult, lisades @property toe ühilduvates brauserites.
• Polüfillid ja varuvariandid: Kaaluge polüfillide kasutamist või varuvariantide pakkumist brauseritele, mis ei toeta täielikult @property't. See võib hõlmata tavaliste CSS-muutujate kasutamist või eeltöötlust SASS-i, LESS-i või muude metoodikate abil.

CSS @property kasutamine JavaScriptiga

Üks CSS-i kohandatud omaduste suurimaid eeliseid on nende võime olla manipuleeritav JavaScriptiga, võimaldades dünaamilist stiilimist ja paremaid kasutajakogemusi. @property täiustab seda võimekust, muutes CSS-i ja JavaScripti vahelise integratsiooni veelgi võimsamaks ja prognoositavamaks.

Siin on, kuidas saate JavaScriptis suhelda @property abil defineeritud kohandatud omadustega:

1. Kohandatud omaduse väärtuse saamine: Kasutage getPropertyValue(), et hankida kohandatud omaduse väärtus.

               
   const element = document.querySelector('.my-element');
   const primaryColor = getComputedStyle(element).getPropertyValue('--primary-color');
   console.log(primaryColor); // nt "#007bff"
   
               
   
                 
                   Copy
                 
               
             

2. Kohandatud omaduse väärtuse määramine: Kasutage setProperty(), et määrata kohandatud omaduse väärtus. `@property` definitsiooni syntax parameetri tõttu võib JavaScripti-põhine määramine käivitada väärtuse valideerimise brauseris.

               
   element.style.setProperty('--primary-color', 'green');
   
               
   
                 
                   Copy
                 
               
             

Näide: Dünaamiline värvimuutus JavaScriptiga

Illustreerime, kuidas luua dünaamilist värvimuutust JavaScripti ja @property abil.

HTML:

            
<button class="my-button">Muuda värvi</button>

            

              
                Copy
              
            
          

CSS:

            
@property --button-color {
  syntax: <color>;
  inherits: false;
  initial-value: #007bff;
}

.my-button {
  background-color: var(--button-color);
  color: white;
  padding: 10px 20px;
  border: none;
  cursor: pointer;
}

            

              
                Copy
              
            
          

JavaScript:

            
const button = document.querySelector('.my-button');

button.addEventListener('click', () => {
  const newColor = 'red'; // Võiks põhineda mingil loogikal/sisendil
  button.style.setProperty('--button-color', newColor);
});

            

              
                Copy
              
            
          

Selles näites muudab nupule klõpsamine nupu taustavärvi, muutes JavaScripti abil --button-color kohandatud omadust.

Rahvusvahelistamine (i18n) ja CSS @property

CSS @property võib olla väärtuslik tööriist veebirakenduste loomisel, mis toetavad erinevaid keeli ja lokaate. Siin on, kuidas seda saab rakendada i18n-i puhul:

• Tüpograafia: Defineerige kohandatud omadused kirjasuuruste, reavahede ja kirjastiilide jaoks, mis võimaldab teil kohandada teksti välimust vastavalt valitud keelele.
• Paigutus: Kasutage omadusi vahekauguste, marginaalide ja polsterduste jaoks, et kohaneda teksti suuna variatsioonidega (nt vasakult-paremale vs. paremalt-vasakule) ja erinevate märkide laiustega.
• Värvid: Kasutage omadusi kasutajaliidese elementide värvide jaoks, nagu nupuvärvid, tekstivärvid ja taustavärvid. Neid saab kohandada vastavalt kultuurilistele eelistustele või konkreetsete piirkondade disainijuhistele.
• Teksti suund: Kasutage kohandatud omadust teksti suuna kontrollimiseks (nt ltr, rtl) ja muutke paigutust vastavalt.

Näide: Kirjasuuruste kohandamine vastavalt keelele

Selles näites demonstreerime, kuidas kohandada pealkirjade kirjasuurust vastavalt valitud keelele. Lähenemine kasutaks JavaScripti teeki, et määrata sobiv keel ja seada kohandatud omadused.

            
@property --heading-font-size {
  syntax: <length>;
  inherits: false;
  initial-value: 2rem;
}

h1 {
  font-size: var(--heading-font-size);
}

            

              
                Copy
              
            
          

Seejärel määrake väärtus dünaamiliselt JavaScriptis tuvastatud keele põhjal:

            
// Eeldades globaalset muutujat või funktsiooni kasutaja keele saamiseks
const userLanguage = getUserLanguage();
const heading = document.querySelector('h1');

if (userLanguage === 'ja') {
  heading.style.setProperty('--heading-font-size', '1.8rem'); // Kohanda jaapani keele jaoks
} else {
  heading.style.setProperty('--heading-font-size', '2rem'); // Vaikimisi
}

            

              
                Copy
              
            
          

Juurdepääsetavuse kaalutlused

@property'ga töötades on oluline pidada meeles juurdepääsetavust:

• Värvikontrastsus: Tagage piisav värvikontrastsus teksti ja tausta vahel. Kasutage värvide jaoks kohandatud omadusi, et disaini hõlpsalt uuendada vastavalt kontrastsusnõuetele.
• Teksti suurus: Lubage kasutajatel teksti suurust kontrollida. Kasutage suhtelisi ühikuid (rem, em) ja kohandatud omadusi, et muuta kirja skaleerimine lihtsaks.
• Fookuse indikaatorid: Kohandage fookuse indikaatoreid, et muuta need selgelt nähtavaks. Kasutage kohandatud omadusi, et kontrollida fookuse piirjoonte värvi ja stiili.
• ARIA atribuudid: Veenduge, et elementidel oleksid sobivad ARIA atribuudid, kui kasutate kohandatud omadusi olekute või käitumise kontrollimiseks.
• Klaviatuuriga navigeerimine: Veenduge, et teie veebisait on klaviatuuriga kergesti navigeeritav, eriti kui interaktiivsete elementide haldamiseks kasutatakse kohandatud omadusi.

Brauseriülesed kaalutlused ja lahendused

Kuigi @property on võimas tööriist, pidage meeles, et brauseri tugi pole veel universaalselt rakendatud. Peaksite kasutama brauseriüleseid tehnikaid, et leevendada toe puudumise mõju.

• Progressiivne täiustamine: Kujundage oma stiilid põhiliste CSS-muutujatega ja seejärel kasutage `@property`'t lisafunktsioonide jaoks toetatud brauserites.
• Funktsionaalsuse tuvastamine: Kasutage funktsionaalsuse tuvastamise meetodeid, et määrata, kas brauser toetab @property't, enne kui rakendate selle abil stiile. Lihtsa kontrolli saab teha JavaScripti abil.
• CSS-i varuvariandid: Pakkuge varuväärtusi omadustele, mida ei toetata. Seda saab teha omaduste otse määramisega või erinevate muutujate kasutamisega toetatud ja mittetoetatud brauserite jaoks.
• Eeltöötlejad: Kasutage CSS-i eeltöötlejaid nagu Sass või Less, et tõlkida kõrgema taseme struktuurid standardseks CSS-iks, mida saab kasutada brauserites, millel pole täielikku `@property` tuge. Kuigi see lisab täiendava sammu, kaaluvad eelised sageli puudused üles.

Näide CSS-i varuvariandist:

            
.element {
  --base-color: #333; /* Vaikeväärtus brauseritele ilma @property'ta */
  color: var(--base-color);
}

@supports (color: --base-color) { /* @property funktsionaalsuse tuvastamine */
  @property --base-color {
    syntax: <color>;
    inherits: false;
    initial-value: #333;
  }
  /* Lisage siia keerulisem stiilimine, kasutades @property't */
}

            

              
                Copy
              
            
          

Tööriistad ja teegid

Erinevad tööriistad ja teegid võivad aidata @property'ga töötamisel:

• PostCSS-i pistikprogrammid: Pistikprogrammid nagu `postcss-custom-properties` ja `postcss-custom-properties-experimental` aitavad teisendada kohandatud omadusi ja pakkuda tuge vanematele brauseritele, konverteerides `@property` definitsioonid samaväärseteks CSS-reegliteks.
• Stylelint: Integreerige stylelint ja kohandatud reeglid või pistikprogrammid, et valideerida oma kohandatud omaduste kasutust ja struktuuri.
• Disainisüsteemide raamistikud: Integreerige @property populaarsetesse disainisüsteemide raamistikkudesse nagu Ant Design, Material UI ja Bootstrap, et tagada disaini järjepidevus ja pakkuda arendajatele sujuvamat kogemust.

Kokkuvõte

CSS @property on võimas täiendus veebiarenduse tööriistakasti, tuues kohandatud omadustele struktuuri, valideerimise ja dünaamilised võimalused. Määratledes oma CSS-muutujate tüübi ja käitumise, saate parandada koodi hooldatavust, suurendada disaini järjepidevust ja luua robustsemaid ning prognoositavamaid stiililahendusi.

Kuna brauseritugi paraneb, muutub @property'i kaasamine oma projektidesse üha olulisemaks. Võttes omaks selles juhendis kirjeldatud parimad tavad, saate ära kasutada selle uue funktsiooni eeliseid ja kirjutada tõhusamat, hooldatavamat ja skaleeritavamat CSS-i. Võtke @property omaks ja muutke oma veebiarenduse töövoogu!

Lisalugemist

• MDN Web Docs: @property
• CSS Custom Properties for Cascading Variables Module Level 1
• Can I Use: @property